<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>体验VUE</title>
    </head>
    <body>

        <p>实例与数据</p>
        <ul>
            <li> <a href="/vue2/instance.html">Vue 2</a> </li>
            <li> <a href="/vue3/instance.html">Vue 3</a> </li>
        </ul>

        <p>属性绑定</p>
        <ul>
            <li> <a href="/vue3/attribute-bind.html">属性绑定(Vue 3)</a> </li>
        </ul>

        <p>事件绑定</p>
        <ul>
            <li> <a href="/vue3/event-bind.html">事件绑定(Vue 3)</a> </li>
        </ul>

        <p>指令</p>
        <ul>
            <li> <a href="/vue3/v-for.html">v-for指令(Vue 3)</a> </li>
            <li> <a href="/directives/v-cloak.html">v-cloak</a> </li>
            <li> <a href="/directives/v-once.html">v-once</a> </li>
            <li> <a href="/directives/v-if.html">v-if、v-else-if、v-else、v-show</a> </li>
            <li> <a href="/directives/v-for.html">v-for</a> </li>
            <li> <a href="/directives/array.html">v-for、数组排序、数组过滤、计算属性</a> </li>
        </ul>

        <p>过滤器</p>
        <ul>
            <li> <a href="/vue2/filter.html">过滤器(Vue 2)</a> </li>
        </ul>

        <p>计算属性</p>
        <ul>
            <li> <a href="/directives/array.html">计算属性</a> </li>
        </ul>

        <p>属性绑定</p>
        <ul>
            <li> <a href="/attributes/inline.html">绑定内联样式</a> </li>
        </ul>

        <p>表单输入绑定</p>
        <ul>
            <li> <a href="/form/form.html">单行文本框、文本域、单选框、复选框、下拉框</a> </li>
            <li> <a href="/form/value-bound.html">值绑定</a></li>
        </ul>

        <p>自定义指令</p>
        <ul>
            <li> <a href="/custom/v-focus.html">自动获得焦点的文本框</a> </li>
            <li> <a href="/custom/v-iterator.html">思考题:如何实现v-for操作</a> </li>
        </ul>

        <p>监听器(watcher)</p>
        <ul>
            <li> <a href="/watcher/watch.html">watch</a> </li>
        </ul>

        <p>组件基础( Vue.js 3 )</p>
        <ul>
            <li> <a href="/components/button-counter.html">定义组件、注册组件、使用组件</a> </li>
            <li> <a href="/components/welcome.html">本地注册、通过prop从父组件向子组件传递数据</a> </li>
            <li> <a href="/components/register.html">区分全局注册和本地注册(要特别注意与 Vue.js 2 区别)</a></li>
            <li> <a href="/components/shopping-cart1.html">通过prop向子组件传递数据 / 购物车和购物车项</a> </li>
            <li> <a href="/components/shopping-cart2.html">通过prop向子组件传递数据 / 绑定一个对象</a> </li>
            <li> <a href="/components/prop.html">prop验证 / 非 prop 属性</a> </li>
            <li> <a href="/components/cart-item.html">监听子组件事件</a> </li>
            <li> <a href="/components/input.html">测试 &lt;input&gt; 的 input 事件</a> </li>
            <li> <a href="/components/v-model.html">在组件上使用v-model指令</a> </li>
            <li> <a href="/components/slot.html">使用插槽分发内容</a> </li>
            <li> <a href="/components/named-slot.html">命名插槽(具名插槽)</a> </li>
        </ul>

        <p>组件基础( Vue.js 2 )</p>
        <ul>
            <li> <a href="/vue2/component.html">定义组件、注册组件、使用组件( Vue.js 2 )</a> </li>
        </ul>

    </body>
</html>